<template>
	<view class="appoint">
		<xbd-pages-content title="我要预约">
			<template #content>
				<view class="content" :style="'minHeight : ' + windowHeight + 'px;'">
					<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<!-- 申请部门 -->
						<view class="first_input">
							<uni-forms-item :label-width="106" label="申请部门">
								<view class="department">{{userInfo.user_department}}</view>
							</uni-forms-item>
						</view>
						<!-- 部门负责人 -->
						<uni-forms-item :label-width="106" required label="部门负责人" name="leader">
							<uni-easyinput maxlength="10" :clearable="false" type="text" v-model="formData.leader"
								placeholder="请输入姓名" />
						</uni-forms-item>
						<!--接待事由 -->
						<uni-forms-item class="area" :label-width="106" required label="接待事由" name="reason">
							<uni-easyinput :clearable="false" class="textarea" type="textarea" v-model="formData.reason"
								placeholder="请输入接待事由" :maxlength="100">
							</uni-easyinput>
							<!-- #ifdef APP-PLUS || H5 -->
							<view class="mit">
								字数限制：100
							</view>
							<!-- #endif -->
						</uni-forms-item>
						<!-- 接待标准 -->
						<uni-forms-item :label-width="106" required label="接待标准">
						</uni-forms-item>
						<view class="standard">
							<uni-forms-item :label-width="80" label="套间" name="suiteRoom">
								<view class="standard_box ">
									<uni-easyinput :clearable="false" v-if="number1 === '0'" disabled="disabled"
										class="box2" type="text" v-model="formData.suiteRoom " placeholder="0" />
									<uni-easyinput :clearable="false" v-else-if="number1 !== '0'" class="box2"
										type="text" v-model="formData.suiteRoom " placeholder="0" />
									<view class="standard_tag">
										共{{number1}}间
									</view>
								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="46" label="标间" name="standardRoom">
								<view class="standard_box">
									<uni-easyinput :clearable="false" v-if="number2 === '0'" disabled="disabled"
										class="box2" type="text" v-model="formData.standardRoom" placeholder="0" />
									<uni-easyinput :clearable="false" v-else-if="number2 !== '0'" class="box2"
										type="text" v-model="formData.standardRoom" placeholder="0" />
									<view class="standard_tag">
										共{{number2}}间
									</view>
								</view>
							</uni-forms-item>
						</view>
						<view class="standard">
							<uni-forms-item :label-width="80" label="真硒水" name="watering">
								<view class="standard_box">
									<uni-easyinput :clearable="false" class="box2" type="text"
										v-model="formData.watering " placeholder="0" />
								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="46" label="拖鞋" name="slipper">
								<view class="standard_box">
									<uni-easyinput :clearable="false" class="box2" type="text"
										v-model="formData.slipper" placeholder="0" />
								</view>
							</uni-forms-item>
						</view>
						<view class="standard">
							<uni-forms-item :label-width="80" label="洗漱套装" name="washSuit">
								<view class="standard_box">
									<uni-easyinput :clearable="false" class="box2" type="text"
										v-model="formData.washSuit " placeholder="0" />
								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="46" label="茶叶" name="tea">
								<view class="standard_box">
									<uni-easyinput :clearable="false" class="box2" type="text" v-model="formData.tea"
										placeholder="0" />
								</view>
							</uni-forms-item>
						</view>


						<!-- 入住时间 -->
						<!-- #ifdef APP-PLUS || H5 -->
						<view class="date">
							<uni-forms-item :label-width="96" required label="入住时间" name="dateSta">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateSta" :start="startDate"
										:end="endDate" @change="bindDateChangeSta">
										<view class="uni-input">
											<view class="">
												<image src="../../static/images/date2.svg"></image>
												<text>{{formData.dateSta}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="0" name="timeSta">
								<view class="box">
									<picker mode="time" :value="formData.timeSta" @change="bindTimeChangeSta">
										<view class="uni-input">
											<view class="">
												<image class="date3" src="../../static/images/date3.svg"></image>
												<text>{{formData.timeSta}}</text>
											</view>
										</view>
									</picker>

								</view>
							</uni-forms-item>
						</view>
						<view class="tag">
							至
						</view>
						<view class="date">
							<uni-forms-item :label-width="96" name="dateEnd">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateEnd" :start="startDate"
										:end="endDate" @change="bindDateChangeEnd">
										<view class="uni-input">
											<view class="">
												<image src="../../static/images/date2.svg"></image>
												<text>{{formData.dateEnd}}</text>
											</view>
										</view>
									</picker>

								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="0" name="timeEnd">
								<view class="box">
									<picker mode="time" :value="formData.timeEnd" @change="bindTimeChangeEnd">
										<view class="uni-input">
											<view class="">
												<image class="date3" src="../../static/images/date3.svg"></image>
												<text>{{formData.timeEnd}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
						</view>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS || H5 -->
						<uni-forms-item :label-width="96" required label="入住时间" name="dateSta">
							<picker fields="day" mode="date" :value="formData.dateSta" @change="bindDateChangeSta">
								<view class="smoll_date">
									<view>
										<image src="../../static/images/date2.svg"></image>
										<text>{{formData.dateSta}}</text>
									</view>
								</view>
							</picker>
						</uni-forms-item>
						<view class="tag">
							至
						</view>
						<uni-forms-item :label-width="96" name="dateEnd">
							<picker fields="day" mode="date" :value="formData.dateEnd" :start="formData.dateSta"
								@change="bindDateChangeEnd">
								<view class="smoll_date">
									<view>
										<image src="../../static/images/date2.svg"></image>
										<text>{{formData.dateEnd}}</text>
									</view>
								</view>
							</picker>
						</uni-forms-item>
						<!-- #endif -->

						<!-- 客人信息 -->


						<template v-for="(item,index) in formData.dynamicLists">
							<view class="guest">
								<uni-forms-item :label-width="120" required :label="item.label+' '+(index+1)">
								</uni-forms-item>
								<uni-forms-item :label-width="96" required label="所属单位"
									:rules="[{'required': true,errorMessage: '客人信息'+(index+1)+'：请填写所属单位'},{'maxLength': 14,errorMessage: '客人信息'+(index+1)+'：所属单位字数限制14个字 '}]"
									:name="'formData.dynamicLists['+index+'].unit'">
									<uni-easyinput maxlength="14" :clearable="false"
										v-model="formData.dynamicLists[index].unit" placeholder="请输入单位名称" />
								</uni-forms-item>
								<uni-forms-item :label-width="96" required label="人员姓名"
									:rules="[{'required': true,errorMessage: '客人信息'+(index+1)+'：请填写入住人员姓名'},{'maxLength': 10,errorMessage: '客人信息'+(index+1)+'：请输入正确人员姓名 '}]"
									:name="'formData.dynamicLists['+index+'].name'">
									<uni-easyinput maxlength="10" :clearable="false"
										v-model="formData.dynamicLists[index].name" placeholder="请输入入住人员姓名" />
								</uni-forms-item>
								<uni-forms-item :label-width="96" required label="联系方式"
									:rules="[{'required': true,errorMessage: '客人信息'+(index+1)+'：请填写联系方式'},{'pattern': '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$', errorMessage: '客人信息'+(index+1)+'：请填写正确联系方式'}]"
									:name="'formData.dynamicLists['+index+'].phone'">
									<uni-easyinput :clearable="false" v-model="formData.dynamicLists[index].phone"
										placeholder="请输入入住人员联系方式" />
								</uni-forms-item>

								<view class="del" @click="del(item.id)" v-if="index !==0 ">
									<image src="../../static/images/home/del.svg" mode=""></image>
								</view>
							</view>


						</template>


					</uni-forms>
					<view class="add" @click="add">
						<image src="../../static/images/home/add.svg" mode=""></image>
						<view>添加入住人</view>
					</view>
					<view class="foot">
						<view class="btns">
							<button type="default" class="draft" @click="cancel">取消</button>
							<button type="default" class="upload" @click="submit">确认提交</button>
						</view>
					</view>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		House
	} from '@/api/index.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				flag: true,
				number1: '',
				number2: '',
				formData: {
					leader: '',
					reason: '',
					suiteRoom: '',
					standardRoom: '',
					watering: '',
					slipper: '',
					washSuit: '',
					tea: '',
					// #ifdef APP-PLUS || H5
					dateSta: currentDate,
					dateEnd: currentDate,
					timeSta: '08:00',
					timeEnd: '19:00',
					// #endif 
					// #ifndef APP-PLUS || H5 
					dateSta: currentDate + ' 08:00',
					dateEnd: currentDate + ' 19:00',
					// #endif

					dynamicLists: [{
						label: '客人信息',
						id: 1,
						unit: '',
						name: '',
						phone: '',
					}],
				},
				rules: {
					leader: {
						rules: [{
								required: true,
								errorMessage: '部门负责人：请填写部门负责人姓名',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.indexOf(" ") !== -1) {
										callback('部门负责人：不能输入带有空格的内容');
									}
									return true
								}
							}
						]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '接待事由：请填写申请理由',
						}],
						validateTrigger: 'bind'
					},
					suiteRoom: {
						rules: [{
								required: true,
								errorMessage: '套间：请填入所需套间数,不需要则输入0',
							},
							{
								pattern: '^\\d+$',
								errorMessage: '套间：请输入大于等于0的整数',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (+value > +this.number1) {
										callback('套间：请重新输入申请数量')
									}
									return true
								}
							}
						],

					},
					standardRoom: {
						rules: [{
								required: true,
								errorMessage: '标间：请填入所需标间数,不需要则输入0',
							},
							{
								pattern: '^\\d+$',
								errorMessage: '标间：请输入大于等于0的整数',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (+value > +this.number2) {
										callback('标间：请重新输入申请数量')
									}
									if (this.formData.suiteRoom === '0' || '') {
										if (value === '0' || '') {
											callback('请选择至少一间房间')
										}
										return true
									}
									return true
								}
							}
						],

					},
					watering: {
						rules: [{
								required: false,
							},
							{
								pattern: '^\\d+$',
								errorMessage: '真硒水：请输入大于等于0的整数',
							},
						],

					},
					slipper: {
						rules: [{
								required: false,
							},
							{
								pattern: '^\\d+$',
								errorMessage: '拖鞋：请输入大于等于0的整数',
							},
						],

					},
					washSuit: {
						rules: [{
								required: false,
							},
							{
								pattern: '^\\d+$',
								errorMessage: '洗漱套装：请输入大于等于0的整数',
							},
						],

					},
					tea: {
						rules: [{
								required: false,
							},
							{
								pattern: '^\\d+$',
								errorMessage: '茶叶：请输入大于等于0的整数',
							},
						],

					},
					dateSta: {
						rules: [{
							required: true,
							errorMessage: '入住时间：请选择开始日期',
						}]
					},
					dateEnd: {
						rules: [{
								required: true,
								errorMessage: '入住时间：请选择结束日期',
							},
							{
								// #ifdef APP-PLUS || H5
								validateFunction: (rule, value, data, callback) => {
									if (value < this.formData.dateSta) {
										callback('入住时间：请重新选择入住时间')
									}
									return true
								}
								// #endif
								// #ifndef APP-PLUS || H5
								validateFunction: (rule, value, data, callback) => {
									if (value <= this.formData.dateSta) {
										callback('入住时间：请重新选择入住时间')
									}
									return true
								}
								// #endif
							}
						]
					},
					timeSta: {
						rules: [{
							required: true,
							errorMessage: '入住时间：请选择开始时间',
						}]
					},
					timeEnd: {
						rules: [{
								required: true,
								errorMessage: '入住时间：请选择结束时间',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (this.formData.dateSta === this.formData.dateEnd && value <= this.formData
										.timeSta) {
										callback('入住时间：请重新选择入住时间')
									}
									return true
								}
							}
						]
					},
				}
			};
		},
		methods: {
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			bindDateChangeSta: function(e) {
				this.formData.dateSta = e.target.value
			},
			bindDateChangeEnd: function(e) {
				this.formData.dateEnd = e.target.value
			},
			bindTimeChangeSta: function(e) {
				this.formData.timeSta = e.target.value
			},
			bindTimeChangeEnd: function(e) {
				this.formData.timeEnd = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 新增表单域
			add() {

				this.formData.dynamicLists.push({
					label: '客人信息',
					id: Date.now(),
					unit: '',
					name: '',
					phone: '',
				})
			},
			// 删除表单域
			del(id) {
				let index = this.formData.dynamicLists.findIndex(v => v.id === id)
				this.formData.dynamicLists.splice(index, 1)
			},

			async submit(val) {
				
				if(this.number2 === '0' && this.number1 === '0' ){
					uni.showToast({
						title: '当前无可预约房间',
						mask: true,
						icon: 'none'
					})
				}else {
					this.$refs.form.setRules(this.rules);
					const info = {
						apply_department_name: this.userInfo.user_department,
						apply_charge_name: this.formData.leader,
						apply_reason: this.formData.reason,
						// #ifdef APP-PLUS || H5 
						apply_start_time: this.formData.dateSta + ' ' + this.formData.timeSta + ':00',
						apply_end_time: this.formData.dateEnd + ' ' + this.formData.timeEnd + ':00',
						// #endif 
						// #ifndef APP-PLUS || H5
						apply_start_time: this.formData.dateSta + ':00',
						apply_end_time: this.formData.dateEnd + ':00',
						// #endif 
						apply_standard_suite: this.formData.suiteRoom || '0',
						apply_standard_room: this.formData.standardRoom || '0',
						apply_standard_water: this.formData.watering || '0',
						apply_standard_slipper: this.formData.slipper || '0',
						apply_standard_wash: this.formData.washSuit || '0',
						apply_standard_tea: this.formData.tea || '0',
						apply_guest: this.formData.dynamicLists || '0',
					};
					const o = {
						obj: info
					};
					try {
						
						const valid = await this.$refs.form.validate();
						
						if (this.flag) {
							try {
								this.flag = false
								this.$showLoading('加载中');
								const res = await House.postFrom(o);
								uni.hideLoading();
								if(res.success){
									this.flag = true
									uni.showToast({
										title: '您的申请提交成功！',
										icon: 'none',
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 1000)
									
								}else{
									this.flag = true
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
								
							} catch (err) {
								uni.hideLoading();
							}
						};
					} catch (err) {
						uni.showToast({
							title: err[0].errorMessage,
							icon: 'none'
						})
					}
				}

				
			},

		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		computed: {
			...mapState(['windowHeight', 'userInfo']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},

		},
		onLoad(res) {
			this.number1 = res.suite
			this.number2 = res.room
				
			if(res.suite === '0'){
				this.formData.suiteRoom = res.suite
			}else if (res.room==='0'){
				this.formData.standardRoom = res.room
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep uni-button:after {
		border: none !important;
	}

	::v-deep .uni-error-message {
		z-index: -1;
	}

	::v-deep .is-input-error-border {
		border-color: #888888 !important;
	}

	::v-deep .easy-select {
		padding-left: 20rpx !important;
	}

	::v-deep .is-input-border {
		border-color: #888888 !important;
		color: #999999;
	}

	::v-deep .data-v-2f345629 {
		white-space: nowrap;
	}

	::v-deep .data-v-abe12412 {
		border-radius: 8rpx;
		color: #999999 !important;
	}

	::v-deep .uni-input {
		white-space: nowrap;
	}

	::v-deep .uni-forms-item__inner {
		box-sizing: border-box;
		padding-bottom: 6px;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 32rpx;
	}

	::v-deep .uni-forms-item__label .label-text {
		font-size: 32rpx;
	}

	::v-deep .uni-easyinput__content-textarea {
		font-size: 28rpx;
	}

	::v-deep .data-v-61dfc0d0 {
		box-sizing: border-box;
		padding-bottom: 6px;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 28rpx;
	}

	::v-deep .uni-forms-item__label {
		box-sizing: border-box;
		padding-top: 20rpx !important;
	}

	::v-deep .data-v-2f345629 {
		font-size: 28rpx;
	}

	::v-deep .a-image.data-v-2f345629 {
		width: 28rpx !important;
		height: 28rpx !important;
	}

	// ::v-deep .uni-forms-item__label {
	// 	align-items: center;
	// }
	.first_input {
		box-sizing: border-box;
		padding-left: 5px;
	}

	.standard_tag {
		font-size: 28rpx !important;
		color: #A6ADB7;
	}

	.standard_box {
		width: 160rpx;
	}

	.day_fz {
		font-size: 28rpx !important;
	}

	.content {
		// margin-top: 10px;
		padding: 50rpx;
		background-color: #FFFFFF;
	}

	.tag {
		font-size: 32rpx;
		color: #194769;
		margin: -10px 0 10px 100px;
	}

	.input {
		width: 92.5%;
		height: 30px;
		border: 1px solid #999999;
		border-radius: 5px;
		padding-left: 20rpx;

		font-size: 32rpx;

		color: #999999;
	}

	.department {
		padding-top: 6rpx;
		box-sizing: border-box;
		width: 400rpx;
		font-size: 28rpx;
		color: #394954 !important;
		white-space:normal;
		overflow: hidden;
		word-break: break-all;
	}

	.foot {
		// width: 750rpx;
		// position: fixed;
		// box-sizing: border-box;
		// padding: 20rpx 50rpx 80rpx 50rpx;
		// margin-left: -50rpx;
		// bottom: 0rpx;
		// background-color: #FFFFFF;
		
		margin-top: 100rpx;
		.btns {
			display: flex;
			justify-content: space-between;

			button {
				width: 300rpx;
				height: 30px;
				line-height: 30px;
				font-size: 28rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
			}

			.draft {
				color: #FFFFFF;
				margin-right: 50rpx;
				background: url(../../static/images/meal/gary.png) no-repeat;
				background-size: 100% 100%;
			}

			.upload {
				background: url(../../static/images/common/bluebg.png) no-repeat;
				background-size: 100% 100%;
				color: $uni-text-color-inverse;
			}
		}
	}

	.standard {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding-left: 12rpx;

		.data-v-abe12412 {
			width: 160rpx !important;
		}

		.box2 {
			width: 160rpx !important;
			box-sizing: border-box;
			border-radius: 4px;

			.uni-input {
				font-size: 28rpx;
			}
		}
	}

	.date {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;

		.box {
			width: 200rpx;
			box-sizing: border-box;
			padding-right: 16rpx;
			height: 28px;
			line-height: 28px;
			border: 1px solid #999999;
			border-radius: 4px;
			// margin-right: 20rpx;

			.uni-input {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #999999;

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 4rpx;
				}

				.date3 {
					vertical-align: sub;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.smoll_date {
		display: flex;
		align-items: center;
		height: 32px;

		font-size: 28rpx;
		width: 100% !important;
		border: 2rpx solid #999999;
		border-radius: 4px;
		color: #999999;
		box-sizing: border-box;

		image {
			vertical-align: sub;
			width: 22rpx;
			height: 22rpx;
			margin: 0 24rpx 4rpx 24rpx;
		}
	}

	.textarea {
		width: 100%;
		height: 100px;
		border-radius: 8rpx;
		box-sizing: border-box;
		font-size: 32rpx;

		color: #999999;
	}


	.area {
		position: relative;

		.mit {
			position: absolute;
			bottom: 20px;
			right: 30rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.all {

		color: #999999;
		font-size: 28rpx;
		margin-bottom: 20px;
	}

	.guest {
		position: relative;

		.del {
			position: absolute;
			top: 0;
			right: 20rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

	}

	.add {
		margin-bottom: 40px;
		display: flex;
		height: 30px;
		line-height: 30px;
		font-size: 32rpx;
		color: #457AFF;
		align-items: center;

		image {
			margin: 0 20rpx;
			width: 40rpx;
			height: 40rpx;
		}

	}
</style>
